<template>
	<div class="app-container">
		<div class="search-container">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item label="关键字" prop="keywords">
					<el-input
						v-model="queryParams.keywords"
						placeholder="请输入关键字"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="设备分类" prop="keywords">
					<el-select placeholder="请选择设备分类" v-model="queryParams.type"
										 clearable
					>
						<el-option
							v-for="item in DeviceType"
							:value="item.value"
							:label="item.label"
							:key="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery"
					>
						<i-ep-search/>
						搜索
					</el-button
					>
					<el-button @click="resetQuery">
						<i-ep-refresh/>
						重置
					</el-button
					>
				</el-form-item>
			</el-form>
		</div>
		
		<el-card shadow="never">
			<template #header>
				<div class="flex justify-between">
					<div>
						<el-button type="success" v-hasPerm="['sys:projectCheckinDeviceCommand:add']"
											 @click="openDialog(0,'新增')"
						>
							<i-ep-plus/>
							新增
						</el-button
						>
					</div>
				</div>
			</template>
			
			<el-table
				v-loading="loading"
				:data="tableList"
				highlight-current-row
				border
			>
				<el-table-column
					label="序号"
					type="index"
					width="60"
					align="center"
				></el-table-column>
<!--				<el-table-column-->
<!--					key="deviceTypeName"-->
<!--					label="设备类型"-->
<!--					align="center"-->
<!--					prop="deviceTypeName"-->
<!--					width="180"-->
<!--				/>-->
				<el-table-column
					key="name"
					label="命令名称"
					align="center"
					prop="name"
					width=""
				/>
<!--				<el-table-column-->
<!--					key="operator"-->
<!--					label="命令代码"-->
<!--					align="center"-->
<!--					width=""-->
<!--					prop="operator"-->
<!--				>-->
<!--				</el-table-column>-->
				<el-table-column
					key="code"
					label="命令编码"
					align="center"
					width=""
					prop="code"
				>
				</el-table-column>
				<el-table-column
					key="isAuto"
					label="是否自动执行"
					width="120"
					align="center"
					prop="isAuto"
				>
					<template #default="scope">
						<el-tag :type="scope.row.isAuto ? '' : 'info'">{{ scope.row.isAuto ? '是' : '否' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					key="isDisable"
					label="是否禁用"
					width="120"
					align="center"
					prop="isDisable"
				>
					<template #default="scope">
						<el-tag :type="!scope.row.isDisable ? 'success' : 'danger'">{{ !scope.row.isDisable ? '启用' : '禁用' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					key="createTime"
					label="创建时间"
					width="160"
					align="center"
					prop="createTime"
				/>
				<el-table-column label="操作" fixed="right" :width="mobile === 'mobile' ? 90 : 220">
					<template #default="scope">
						<el-button
							v-if="!scope.row.isDisable"
							type="danger"
							link
							size="small"
							v-hasPerm="['sys:projectCheckinDeviceCommand:disable']"
							@click="doDisable(scope.row.id)"
						>
							<i-ep-warnTriangleFilled/>
							禁用
						</el-button>
						<el-button
							v-else
							type="success"
							link
							size="small"
							v-hasPerm="['sys:projectCheckinDeviceCommand:enable']"
							@click="handleEnable(scope.row.id)"
						>
							<i-ep-successFilled/>
							启用
						</el-button>
						<el-button
							type="primary"
							link
							size="small"
							v-hasPerm="['sys:projectCheckinDeviceCommand:edit']"
							@click="openDialog(scope.row.id, '编辑')"
						>
							<i-ep-edit/>
							编辑
						</el-button
						>
						<el-button
							type="primary"
							link
							size="small"
							@click="openDetail(scope.row.id, '详情')"
						>
							<i-ep-grid/>
							详情
						</el-button
						>
						<el-button
							type="primary"
							link
							size="small"
							v-hasPerm="['sys:projectCheckinDeviceCommand:delete']"
							@click="handleDelete(scope.row.id)"
						>
							<i-ep-delete/>
							删除
						</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			
			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageIndex"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>
		
		<!-- 新增/修改弹窗 -->
		<addForm
			v-if="dialogAddOrEdit.visible"
			:dialog-add-or-edit="dialogAddOrEdit"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
			@sendClose="sendClose"
		></addForm>
		
		<detail-description v-if="dialogDetail.visible" :dialogDetail="dialogDetail"
												class="system"
												:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
												@sendDetailClose="sendDetailClose"></detail-description>
	
	</div>
</template>

<script lang="ts">
export default {
	name: "AttendanceOrderMgr",
};
</script>

<script lang="ts" setup>
import addForm from "@/views/system/attendanceOrderMgr/addForm.vue";
import {
	ParamsType,
	CheckinDeviceCommandListForm
} from "@/api/system/device/types";
import {
	getCheckInDeviceCommandList,
	deleteCheckInDeviceCommand,
	disableCheckInDeviceCommand,
	enableCheckInDeviceCommand,
} from "@/api/system/device/index.ts";
import {useUserStore} from "@/store/modules/user";
import {getDicts} from "@/store/modules/dict";
import {resetPasswordCommander} from "@/api/constructor/project";
import DetailDescription from "@/views/system/attendanceOrderMgr/detailDescription.vue";

import {useScreen} from "@/store/modules/screen";
import {computed} from "vue";

const screenStore = useScreen()
const mobile = computed(() => (screenStore.device));
const screenHeight = computed(() => (screenStore.screenHeight));

function initScreen() {
}

const useUser = useUserStore();

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<CheckinDeviceCommandListForm[]>();
const queryParams = reactive<ParamsType>({
	pageIndex: 1,
	pageSize: 20,
});


const currentUserId = useUser.objectId;

const dialogAddOrEdit = reactive<DialogOption>({
	visible: false,
	title: "新增设备命令",
	footBtn: "新增",
});

const dialogDetail = reactive<DialogOption>({
	visible: false,
	id: 0,
	title: "命令详情",
	footBtn: "",
	detail: '详情'
});

/* 列表查询 */
async function handleQuery() {
	let list = await getCheckInDeviceCommandList(queryParams);
	if (list.type === 0) {
		if (list.success) {
			tableList.value = list.data.list;
			
			queryParams.pageIndex = list.data.pageNum;
			queryParams.pageSize = list.data.pageSize;
			total.value = list.data.total;
		} else {
			ElMessage.error(list.msg);
		}
	} else {
		ElMessage.error(list.msg);
	}
}

/* 新增/编辑 */
function openDialog(id, detail) {
	dialogAddOrEdit.visible = true;
	if (id) {
		dialogAddOrEdit.title = "修改命令";
		dialogAddOrEdit.footBtn = "修改";
		dialogAddOrEdit.id = id;
	} else {
		dialogAddOrEdit.id = 0;
		dialogAddOrEdit.title = "新增命令";
		dialogAddOrEdit.footBtn = "新增";
	}
	dialogAddOrEdit.detail = detail;
}

function openDetail(id, detail) {
	dialogDetail.title = "命令详情";
	dialogDetail.footBtn = "";
	dialogDetail.id = id;
	dialogDetail.detail = detail;
	dialogDetail.visible = true;
}

async function doDisable(id) {
	let confirm = await ElMessageBox.confirm("禁用确认?", "禁用提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消!'
		})
		return;
	}
	disableCheckInDeviceCommand(id).then(data => {
		if (data.success) {
			ElMessage.success(data.msg)
		} else {
			ElMessage.error(data.msg)
		}
	})
	handleQuery()
}

async function handleEnable(id) {
	let confirm = await ElMessageBox.confirm("启用确认?", "启用提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消!'
		})
		return;
	}
	enableCheckInDeviceCommand(id).then(data => {
		if (data.success) {
			ElMessage.success(data.msg)
		} else {
			ElMessage.error(data.msg)
		}
	})
	handleQuery()
}

/* 删除班组 */
async function handleDelete(id) {
	let confirm = await ElMessageBox.confirm("确认删除?", "删除提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消！'
		})
		return;
	}
	let delInfo = await deleteCheckInDeviceCommand(id);
	if (delInfo.type === 0) {
		if (delInfo.success) {
			ElMessage.success(delInfo.msg);
			resetQuery();
		} else {
			ElMessage.error(delInfo.msg);
		}
	} else {
		ElMessage.error(delInfo.msg);
	}
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageIndex = 1;
	queryParams.pageSize = 20;
	handleQuery();
}

/* 关闭弹窗并刷新列表 */
function sendClose(query) {
	dialogAddOrEdit.visible = false;
	if (query) {
		handleQuery();
	}
}

function sendDetailClose(query) {
	dialogDetail.visible = false;
}

onMounted(() => {
	initScreen()
	
	handleQuery();
});
const DeviceType = getDicts("deviceType"); //设备分类

</script>

<style lang="less" scoped>

</style>
